import React from 'react'
import { Form, Button, Input, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { getUsersList } from '@api'
import './index.scss'
import ParticlesBg from 'particles-bg'

export default function Login(props) {
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  // 表单提交获取
  const onFinish = (value) => {
    getUsersList({
      ...value,
      roleState: true,
      _expand: 'role'
    }).then((res) => {
      if (res.data.length === 0) {
        message.error("用户名或密码不匹配")
      } else {
        localStorage.setItem("token", JSON.stringify(res.data[0]))
        props.history.push("/")
        message.success("登录成功")
      }
    })
  }

  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  return (
    <div style={{ background: 'rgb(35, 39, 65)', height: "100%", overflow: 'hidden' }}>
      <ParticlesBg  color="#ffffff" type="cobweb" />
      <div className="formContainer">
        <div className="logintitle">全球新闻发布管理系统</div>
        <Form name="normal_login" className="login-form" onFinish={onFinish}>
          <Form.Item name="username" rules={[{ required: true, message: 'Please input your Username!' }]} >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]} >
            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="Password" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
